import React, { useState } from 'react'
import { NavLink,Outlet, useNavigate } from 'react-router-dom';
export default function Message() {
    const navigate = useNavigate()
    const [message] = useState([
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁知盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'}
    ])
    function nav(e){
        navigate('detail',{
            state:{
                id:e.id,
                title:e.title,
                content:e.content
            }
        })
    }
  return (
    <>
        <ul>
            {
                message.map((item) => { return (
                    <li key={item.id}>
                        <NavLink to='detail' state={{id:item.id,title:item.title,content:item.content}}>{item.title}</NavLink>
                        <button onClick={ ()=>{nav(item)}  }>点我查看详情</button>
                    </li>
                )})
            }
        </ul>
        <hr />
        <Outlet/>
    </>
  )
}
